
<template>
    <div>
        <el-row>
            <el-col :span="5" v-for="v in seeShow" v-if="v.type == 'input'">
                {{ v.name }}：
                <el-input
                    suffix-icon="el-icon-search"
                    v-model="seeForm[v.value]"
                    :placeholder="'请输入' + v.name"
                ></el-input>
            </el-col>
            <el-col :span="5" v-for="v in seeShow" v-if="v.type == 'select'">
                {{ v.name }}：
                <el-select v-model="seeForm[v.value]" placeholder="请选择">
                    <el-option v-for="w in v.options" :label="w" :value="w"></el-option>
                </el-select>
            </el-col>

            <el-col :span="4">
                <el-button type="primary" @click="see()">查询</el-button>
                <el-button type="info" @click="reset()">重置</el-button>
                <el-button type="success" @click="addFormVisible = true">新增</el-button>
            </el-col>
        </el-row>
        <!-- 新增 -->
        <el-dialog title="新增" :visible.sync="addFormVisible" width="30%">
            <el-form :model="addForm" ref="addForm">
                <el-form-item
                    :label="v.name"
                    label-width="100px"
                    v-for="v in addShow"
                    v-if="v.type == 'input'"
                    :prop="v.value"
                    :rules="{ required: true, message: '这里不能为空！' }"
                >
                    <el-input
                        v-model="addForm[v.value]"
                        suffix-icon="el-icon-star-on"
                        :placeholder="'请输入' + v.name"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    :label="v.name"
                    label-width="100px"
                    v-for="v in addShow"
                    v-if="v.type == 'switch'"
                >
                    <el-switch
                        v-model="addForm[v.value]"
                        active-color="#409EFF"
                        inactive-color="#DBDEE0"
                    ></el-switch>
                </el-form-item>
                <el-form-item
                    :label="v.name"
                    label-width="100px"
                    v-for="v in addShow"
                    v-if="v.type == 'select'"
                >
                    <el-select v-model="addForm[v.value]" :placeholder="'请选择' + v.name">
                        <el-option v-for="w in v.options" :label="w" :value="w"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    :label="v.name"
                    v-if="v.type == 'textarea'"
                    v-for="v in addShow"
                    label-width="100px"
                >
                    <el-input type="textarea" v-model="addForm[v.value]" resize="none"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSure()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Event from "@/utils/Event";
export default {
    data() {
        return {
            addFormVisible: false,
            seeForm: {},//查询
            seeShow: {},//查询渲染
            addForm: {},//新增
            addShow: {},//新增渲染
            noticeData: {},//所有数据
            numberValidateForm: {
                age: ''
            }
        }
    },
    methods: {
        receive() {
            Event.$on('seeShow', v => {
                if (v) {
                    this.seeShow = v;
                    for (let i = 0; i < this.seeShow.length; i++) {
                        this.seeForm[this.seeShow[i].value] = '';
                    }
                    this.seeForm = { ...this.seeForm }
                }
            })
            Event.$on('addShow', v => {
                if (v) {
                    this.addShow = v;
                    for (let i = 0; i < this.addShow.length; i++) {
                        this.addForm[this.addShow[i].value] = '';
                        this.addShow[i].aNoNone = false;
                        if (v[i].type == 'switch') {
                            this.addForm[this.addShow[i].value] = true;
                        }
                    }
                    this.addForm = { ...this.addForm }
                }
            })
            Event.$on('table', v => {
                this.noticeData = v
            })
        },
        see() {
            Event.$emit('seeForm', this.seeForm);
        },
        reset() {
            this.seeForm = {};
            Event.$emit('reset', true);
        },
        addSure() {
            console.log(this.$refs.addForm);
            this.$refs.addForm.validate((v) => {
                if (v) {
                    Event.$emit('addForm', this.addForm);
                    this.addFormVisible = false;
                    this.$refs.addForm.resetFields();
                } else {
                    return false;
                }
            })
        }
    },

    mounted() {
        this.receive();
    },
    beforeUpdate() {
        this.receive();
    }
}
</script>
<style scoped>
.el-input,
.el-select {
    width: auto;
    display: inline-block;
}
</style>